<script setup lang="ts">
import type { DatePickType } from 'element-plus'

defineEmits<{
  (e: 'search'): void
}>()

const query = shallowReactive({
  type: '',
  period: '3',
  time: '',
})

const pickerType = computed(() => {
  const period = +query.period
  let type: DatePickType = 'date'
  switch (period) {
    case 3:
      type = 'date'
      break
    case 4:
      type = 'month'
      break
    case 6:
      type = 'year'
      break
  }
  return type
})
const isQuarter = computed(() => {
  const period = +query.period
  return period === 5
})
const pickerFormatter = computed(() => {
  const period = +query.period
  let format = ''
  switch (period) {
    case 3:
      format = 'YYYY-MM-DD'
      break
    case 4:
      format = 'YYYY-MM'
      break
    case 5:
      format = ''
      break
    case 6:
      format = 'YYYY'
      break
  }
  return format
})
const disabledDate = (date: Date) => date > new Date()

defineExpose({
  query,
})
</script>

<template>
  <ElForm inline :model="query">
    <ElFormItem label="能源品种">
      <ElSelect v-model="query.type">
        <ElOption value="1" label="电力" />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="周期" class="min-width-auto">
      <ElSelect v-model="query.period" style="width: 70px">
        <ElOption value="3" label="日" />
        <ElOption value="4" label="月" />
        <ElOption value="5" label="季" />
        <ElOption value="6" label="年" />
      </ElSelect>
      <ElSelect v-if="isQuarter" v-model="query.time">
        <ElOption value="1" label="第一季度" />
        <ElOption value="2" label="第二季度" />
        <ElOption value="3" label="第三季度" />
        <ElOption value="4" label="第四季度" />
      </ElSelect>
      <ElDatePicker
        v-else
        v-model="query.time"
        :type="(pickerType as any)"
        :value-format="pickerFormatter"
        :format="pickerFormatter"
        :disabled-date="disabledDate"
      />
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="$emit('search')" />
    </ElFormItem>
  </ElForm>
</template>
